<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: boBrother
 * @LastEditTime: 2022-01-06 20:27:29
-->
<template>
  <div id="right2Container" ref="right2Container" style="height: 95%"></div>
</template>
<script>
// 导入图表
import { get } from "@/utils/request.js";
import { Column } from "@antv/g2plot";
import moment from "moment";
// import { log } from "@antv/g2plot/lib/utils";

export default {
  data() {
    return {
      deviceData: [],
      params: {
        page: 1,
        pageSize: 30,
      },
      columns: null,
      // data: [],
    };
  },
  computed: {
    pm25Data() {
      return this.deviceData.map((item) => {
        return {
          date: moment(item.insert_time).format("hh:mm"),
          // device_id: item.device_id,
          type: "pm2.5",
          value: parseFloat(item.pm25),
          // pm10: parseFloat(item.pm10),
        };
      });
    },
    pm10Data() {
      return this.deviceData.map((item) => {
        return {
          date: moment(item.insert_time).format("hh:mm"),
          // device_id: item.device_id,
          type: "pm10",
          // "pm2.5": parseFloat(item.pm25),
          value: parseFloat(item.pm10),
        };
      });
    },
    columnData() {
      return this.pm25Data.concat(this.pm10Data);
    },
  },
  methods: {
    // 检索设备数据
    queryTodayData() {
      get("/dashboard/pageQueryData", {
        ...this.params,
        device_id: 28,
      }).then((res) => {
        // console.log(res.data.list);
        this.deviceData = res.data.list;
        this.loadCharts();
      });
    },
    // 图表初始化方法
    loadCharts() {
      if (this.columns) {
        this.columns.destroy();
      }
      this.columns = new Column(this.$refs["right2Container"], {
        data: this.columnData,
        xField: "date",
        yField: "value",
        seriesField: "type",
        isGroup: "true",
        xAxis: {
          // range: [0, 1],
          label: {
            style: {
              fill: "rgba(255,255,255,.7)",
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "rgba(255,255,255,.7)",
            },
          },
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        columnStyle: {
          radius: [20, 20, 0, 0],
        },
        legend: {
          // layout: 'horizontal',
          // position: 'right'
          itemName: {
            style: {
              // color: "#000",
              fill: "rgba(255,255,255,.7)",
            },
          },
        },
      });
      this.columns.render();
    },
  },
  // vue实例完全挂载到页面上
  mounted() {
    this.queryTodayData();
    this.loadCharts();
    setInterval(() => {
      // this.loadCharts();
      this.queryTodayData();
    }, 6000);
  },
  created() {},
};
</script>
